<template>
    <div class="page">
        <div class="page-tabs">
            <van-tabs v-model="active" swipeable title-active-color="#000000" color="#713FF5">
                <van-tab v-for="(items, i) in tabsArr" :key="i" :title="items.title">
                    <div class="page-tabs-main">
                        <van-search v-model="value" 
                            class="searchInput"
                            background="#FFFFFF"
                            placeholder="search..."
                            @input="onSearch"
                        />
                        <div v-if="searchDataList.length > 0" class="page-quotations-bot">
                            <div v-for="(item, i) in searchDataList" :key="i" class="page-quotations-bot-item" @click="handlerSearchInfo(item)" v-if="item.changeRate != 0">
                                <div class="page-quotations-bot-item-img">
                                    <img :src="item.icon" alt="">
                                </div>
                                <div class="page-quotations-bot-item-info">
                                    <div class="page-quotations-bot-item-info-left">
                                        <p class="page-quotations-bot-item-info-left-top">{{item.buyCoinName}}</p>
                                        <p class="page-quotations-bot-item-info-left-bot">{{item.code}}</p>
                                    </div>
                                    <div class="page-quotations-bot-item-info-right">
                                        <p class="page-quotations-bot-item-info-right-top">${{item.openingPrice}}</p>
                                        <p class="page-quotations-bot-item-info-right-bot" :class="item.changeRate > 0 ? 'color2' : 'color1'">
                                            {{getPriceData(item.openingPrice,item.changeRate)}}(<span v-if="item.changeRate > 0">+</span>{{item.changeRate}}%)
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="page-quotations-bot">
                            <div v-for="(item, i) in iconList" :key="i" class="page-quotations-bot-item" @click="handlerInfo(item)" v-if="item.changeRate != 0">
                                <div class="page-quotations-bot-item-img">
                                    <img :src="item.icon" alt="">
                                </div>
                                <div class="page-quotations-bot-item-info">
                                    <div class="page-quotations-bot-item-info-left">
                                        <p class="page-quotations-bot-item-info-left-top">{{item.name}}</p>
                                        <p class="page-quotations-bot-item-info-left-bot">{{item.code}}</p>
                                    </div>
                                    <div class="page-quotations-bot-item-info-right">
                                        <p class="page-quotations-bot-item-info-right-top">${{item.openingPrice}}</p>
                                        <p class="page-quotations-bot-item-info-right-bot" :class="item.changeRate > 0 ? 'color2' : 'color1'">
                                            {{getPriceData(item.openingPrice,item.changeRate)}}(<span v-if="item.changeRate > 0">+</span>{{item.changeRate}}%)
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        
        <bottom_nav :activeTitle="activeTitle"></bottom_nav>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeTitle: this.$t('new.doc40'),
            active: 0,
            value: null,
            iconList: [],
            searchDataList: [],
            tabsArr: [
                {
                    title: this.$t('new.doc41'),
                    id: 1
                },
                // {
                //     title: '标普',
                //     id: 2
                // },
                // {
                //     title: 'A股',
                //     id: 3
                // },
            ],
            socket: null,
        }
    },
    mounted() {
        this.getIconList()
    },
    methods: {
        onSearch() {
            this.$post('/market/getMarketByCoin',{coinName: this.value}).then(res => {
                if (res.code == 0) {
                    this.$set(this.searchDataList, 0, res.data)
                } else {
                    this.searchDataList = []
                }
            })
        },
        handlerSearchInfo(item) {
            this.$router.push(`/business/info?id=${item.buyCoinName}&code=${item.code}&coinid=${item.buyCoinId}&sellCoinId=${item.sellCoinId}`)
        },
        handlerInfo(item) {
            this.$router.push(`/business/info?id=${item.name}&code=${item.code}&coinid=${item.buyCoinId}&sellCoinId=${item.sellCoinId}`)
        },
        getIconList() {
            this.$post(this.URL.member.iconListConfig, {}).then(res => {
                if (res.code == 0) {
                    res.data.forEach(e => {
                    // let info = res.data.find(item => item.buyCoinName == e.name);
                    e.code = e.buyCoinName.toLowerCase() + e.sellCoinName.toLowerCase();
                    e.sellCoinId = e.sellCoinId;
                    e.buyCoinId = e.buyCoinId;
                    e.name = e.buyCoinName;
                    e.changeRate = 0;
                    e.closingPriceCny = 0;
                    e.color = 0;
                    e.icon = e.icon
                    })
                    this.iconList = res.data;
                    console.log('getIconList--',this.iconList)
                    this.getData();
                }
            })
        },
        getData() {
            let _this = this;
            if (typeof WebSocket == "undefined") {
            } else {
                _this.socket = new WebSocket(process.env.WSS_URL_API)
                _this.socket.onopen = function () {
                    _this.socket.send('start:topic=market_list')
                };
                console.log(_this.socket.onmessage,'m')
                //获得消息事件
                _this.socket.onmessage = function (msg) {
                    let data = JSON.parse(msg.data);
                    console.log(data,'s')
                    if (data.data != undefined) {
                        _this.iconList.forEach(e => {
                            let info = data.data.find(item => item.code == e.code);
                            if (info != undefined) {
                                e.changeRate = info.changeRate;
                                if (parseFloat(e.openingPrice) > parseFloat(info.openingPrice)) {
                                    e.color = 2
                                } else if (parseFloat(e.openingPrice) < parseFloat(info.openingPrice)) {
                                    e.color = 1
                                } else {
                                    e.color = 0
                                }
                                e.openingPrice = info.openingPrice;

                                if (e.icon == '') {
                                    e.icon = info.icon;
                                }
                            }
                        })
                    }
                };
                //关闭事件
                _this.socket.onclose = function () {
                    console.log('关闭')
                    // _this.getData();
                };
                //发生了错误事件
                _this.socket.onerror = function () {
                    //_this.getData();
                    console.log('错误')
                    //此时可以尝试刷新页面
                };
            }
        },
        getPriceData(openingPrice, changeRate) {
            let value = (openingPrice * changeRate / 100).toFixed(2)
            if (value > 0) {
                return "+" + value
            } else {
                return value
            }
        }
    },
    destroyed() {
        this.socket.close()
    }
}
</script>

<style lang="less" scoped>
.color1 {
    color: #F5435A!important;
}
.color2 {
    color: #00BA7E!important;
}
.page{
    color: #000000;
    width: 100vw;
    height: 100vh;
    &-tabs{
        width: 100vw;
        &-main{
            width: 100vw;
            height: calc(100vh - 2.2rem);
            .searchInput{
                margin-top: .2rem;
            }
            .page-quotations-bot{
                display: flex;
                flex-direction: column;
                width: 100%;
                height: calc(100vh - 3.7rem);
                margin-top: .2rem;
                background-color: #FFFFFF;
                overflow-y: scroll;
                &-item{
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 1.44rem;
                    &-img{
                        width: 1.44rem;
                        height: 1.44rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            width: .96rem;
                            height: .96rem;
                        }
                    }
                    &-info{
                        width: calc(100vw - 1.44rem);
                        height: 1.44rem;
                        border-bottom: 1px solid #F0F2F7;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        &-left{
                            display: flex;
                            flex-direction: column;
                            &-top{
                                color: #000000;
                                font-size: .32rem;
                            }
                            &-bot{
                                color: #A4A9B3;
                                font-size: .28rem;
                            }
                        }
                        &-right{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            margin-right: .32rem;
                            &-top{
                                color: #000000;
                                font-size: .32rem;
                            }
                            &-bot{
                                color: #4A4C52;
                                font-size: .28rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>